Î<template>
	<view>
		<nav-bars bgColor="#fff" fontColor="#000" title="搜索"></nav-bars>
		<view class="Search">
			<u-search placeholder="搜索您感兴趣的内容吧" placeholder-color="#939393" :show-action="true" v-model="keyword"
				@change="SearchChange" @search="EnterClick" @custom="customSearch" @clear="clearValue"
				:animation="false" action-text="搜索">
			</u-search>
		</view>
		<view>
			<view class="tabsList"
				:style="{top:scrollTop >= 50 ?navHeight+'px':'',position: scrollTop >= 50 ?'fixed':'',}">
				<u-tabs :bar-style="tabsBottomStyle" :list="list" inactive-color="#939393" active-color="#333333"
					:is-scroll="false" font-size="28" :current="current" @change="TabsChange"></u-tabs>
			</view>
			<view v-if="current == 0">
				<view class="DomeList">
					<view class="PageNull" v-if="DemoeListArr.length == 0">
						<image src="https://cos.ryz1620.com/liankun/static/nullBg.png"></image>
						<view class="PageNullText">无搜索结果，换个词试试吧~</view>
					</view>
					<u-waterfall v-model="DemoeListArr" ref="uWaterfall">
						<template v-slot:left="{leftList}">
							<view class="DomeItem" v-for="(dome,index) in leftList" :key="index"
								@click="DomeItemDetaile(dome,index)" style="margin-right: 22rpx;">
								<view class="DomeImage">
									<image :src="dome.thumb_url[0].path">
									</image>
								</view>
								<view class="DomeView">
									<view class="DomeMain">{{dome.house_type}} | {{dome.area}}m² | {{dome.offer*1}}万
									</view>
									<view class="DomeTags">
										<view class="DomeTagsItem" v-for="(tags,indexs) in dome.design_style"
											:key="indexs" v-if="indexs < 3">{{tags.name}}</view>
									</view>
									<view class="ellipsisText DomeTitle">{{dome.title}}</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="DomeItem" v-for="(dome,index) in rightList" :key="index"
								@click="DomeItemDetaile(dome,index)">
								<view class="DomeImage">
									<image :src="dome.thumb_url[0].path">
									</image>
								</view>
								<view class="DomeView">
									<view class="DomeMain">{{dome.house_type}} | {{dome.area}}m² | {{dome.offer*1}}万
									</view>
									<view class="DomeTags">
										<view class="DomeTagsItem" v-for="(tags,indexs) in dome.design_style"
											:key="indexs" v-if="indexs < 3">{{tags.name}}</view>
									</view>
									<view class="ellipsisText DomeTitle">{{dome.title}}</view>
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
				<view style="flex: 1;" v-if="DemoeListArr.length > 0">
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
			</view>
			<view v-if="current == 1">
				<view class="GoodsList">
					<view class="PageNull" v-if="GoodsListArr.length == 0">
						<image src="https://cos.ryz1620.com/liankun/static/nullBg.png"></image>
						<view class="PageNullText">无搜索结果，换个词试试吧~</view>
					</view>
					<u-waterfall v-model="GoodsListArr" ref="uWaterfall">
						<template v-slot:left="{leftList}">
							<view class="DomeItem" v-for="(goods,index) in leftList" :key="index"
								@click="GoGoodDetailes(goods,index)" style="margin-right: 22rpx;">
								<view class="DomeImage">
									<image :src="goods.main_imgurl">
									</image>
								</view>
								<view class="DomeView">
									<view class="ellipsisText DomeTitle">{{goods.product_title}}</view>
									<view class="GoodsPirce">
										<view class="GoodsPirceNum">
											<text class="GoodsPirceText"
												style="font-size: 16rpx;font-weight: 400;line-height: 36px;color: #FA4E37;margin-right: 10rpx;">¥</text>
											<text class="GoodsPirceNumber"
												style="font-size: 24rpx;font-weight: 400;line-height: 36px;color: #FA4E37;">{{goods.price*1}}</text>
										</view>
										<view class="GoodsBuyNum" style="font-size: 16rpx;color: #939393;">
											{{goods.volume}}人付款
										</view>
									</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="DomeItem" v-for="(goods,index) in rightList" :key="index"
								@click="GoGoodDetailes(goods,index)">
								<view class="DomeImage">
									<image :src="goods.main_imgurl">
									</image>
								</view>
								<view class="DomeView">
									<view class="ellipsisText DomeTitle">{{goods.product_title}}</view>
									<view class="GoodsPirce">
										<view class="GoodsPirceNum">
											<text class="GoodsPirceText"
												style="font-size: 16rpx;font-weight: 400;line-height: 36px;color: #FA4E37;margin-right: 10rpx;">¥</text>
											<text class="GoodsPirceNumber"
												style="font-size: 24rpx;font-weight: 400;line-height: 36px;color: #FA4E37;">{{goods.price*1}}</text>
										</view>
										<view class="GoodsBuyNum" style="font-size: 16rpx;color: #939393;">
											{{goods.volume}}人付款
										</view>
									</view>
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
				<view style="flex: 1;" v-if="GoodsListArr.length > 0">
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import HomeSearch from '@/service/HomeSearch.js'
	export default {
		name: '',
		components: {},
		data() {
			return {
				keyword: '', //搜索的双向数据
				loadStatus: 'loadmore',
				DemoeListArr: [], //案例数据
				GoodsListArr: [], //商品数据
				tabsBottomStyle: {
					'border-radius': ' 4rpx 4rpx 0rpx 0rpx',
					width: '40rpx',
					height: '8rpx',
					background: '#FFD425'
				},
				current: 0,
				list: [{
					name: '案例'
				}, {
					name: '商品'
				}],
				scrollTop: 0,
				page: 1,
				Hide: true, //搜索热门的显示
				show: false //数据列表的显示
			};
		},
		computed: {
			navHeight() {
				var navHeights = uni.getStorageSync('StatusBarHeight')
				return navHeights.height
			}, // Nav栏高度
		},
		onPageScroll(e) {
			// console.log(e.scrollTop);
			this.scrollTop = e.scrollTop
		},
		watch: {
			GoodsListArr: function(val) {
				// console.log(val);
				let isBool = this.DemoeListArr.length == 0 && val.length > 0 ? true : false
				// console.log(isBool,'GoodsListArr');
				if (isBool == true && this.DemoeListArr.length == 0) {
					this.current = 1
				}
			},
			DemoeListArr: function(val) {
				// console.log(val);
				let isBool = this.GoodsListArr.length == 0 && val.length > 0 ? true : false
				// console.log(isBool,'DemoeListArr');
				if (isBool == true && this.GoodsListArr.length == 0) {
					this.current = 0
				}
			},

		},
		created() {},
		onReachBottom() {
			var that = this
			that.page++;
			that.loadStatus = 'loading';
			uni.showLoading({
				title: '加载中...'
			})
			let params = {
				keyword: that.keyword,
				page: that.page,
			}
			if (that.current == 0) {
				HomeSearch.getDomeList(params).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if (!res.data.length) {
							that.loadStatus = 'nomore';
							return
						} else {
							this.loadStatus = 'loadmore';
						}
						that.DemoeListArr = that.DemoeListArr.concat(res.data)
					}
				})
			} else {
				HomeSearch.getgoodsList(params).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if (!res.data.data.length) {
							that.loadStatus = 'nomore';
							return
						} else {
							this.loadStatus = 'loadmore';
						}
						that.GoodsListArr = that.GoodsListArr.concat(res.data.data)
					}
				})
			}

			setTimeout(function() {
				uni.hideLoading()
				// this.loadStatus = 'loadmore';
			}, 500)
		},
		onLoad(options) {
			this.$utils.getUrl()
			var that = this
			that.keyword = options.keyword
			this.customSearch(options.keyword)
		},
		mounted() {},
		methods: {
			// 输入框内容发生变化时触发	
			SearchChange(e) {
				// console.log(e);
			},
			// 输入框清除按钮
			clearValue() {
				var that = this
				that.keyword = ''
				// that.$refs.uWaterfall.leftList = []
				// that.$refs.uWaterfall.rightList = []
				// that.DemoeListArr = []
				// that.GoodsListArr = []
			},
			// 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发	
			EnterClick(row) {
				// console.log(e);
				this.$refs.uWaterfall.clear();
				let ishistory = this.SearchHistory(row)
				uni.showLoading({
					title: '搜索中',
				})
				this.GetDomeList(row)
				this.GetGoodsList(row)
			},
			// 用户点击右侧控件时触发	
			customSearch(row) {
				this.$refs.uWaterfall.clear();
				let ishistory = this.SearchHistory(row)
				uni.showLoading({
					title: '搜索中',
				})
				this.GetDomeList(row)
				this.GetGoodsList(row)
			},

			// TabsChange
			TabsChange(index) {
				this.current = index;
				this.page = 1
			},
			SearchHistory(row) {
				const arr = uni.getStorageSync('history');
				const history = arr ? JSON.parse(arr) : [];
				if (row != '') {
					if (history.indexOf(row) === -1) {
						history.unshift(row);
						if (history.length >= 10) {
							history.splice(history.length - 1, 1);
						}
						uni.setStorageSync('history', JSON.stringify(history));
						return "true"
					}
					return "false"
				} else {
					this.$utils.showErr({
						title: '请输入您感兴趣的内容吧'
					})
					return "false"
				}
			},
			// 获取搜索案例
			GetDomeList(value) {
				var that = this
				this.page = 1
				if (value !== '') {
					HomeSearch.getDomeList({
							keyword: value,
							page: that.page,
						})
						.then(res => {
							if (res.code == 1) {
								// console.log(res.data);
								setTimeout(function() {
									uni.hideLoading()
								}, 500)
								that.DemoeListArr = res.data
							} else {
								that.$utils.showErr({
									title: res.msg
								})
							}
						})
				} else {
					that.DemoeListArr = []
					that.$refs.uWaterfall.leftList = []
					that.$refs.uWaterfall.rightList = []
					that.$refs.uWaterfall.clear();
					setTimeout(function() {
						uni.hideLoading()
					}, 500)
					// console.log();


				}
			},
			// 获取搜索案例
			GetGoodsList(value) {
				var that = this
				this.page = 1
				if (value !== '') {
					HomeSearch.getgoodsList({
							keyword: value,
							page: that.page,
						})
						.then(res => {
							if (res.code == 1) {
								// console.log(res.data);
								setTimeout(function() {
									uni.hideLoading()
								}, 500)
								that.GoodsListArr = res.data.data
							} else {
								that.$utils.showErr({
									title: res.msg
								})
							}
						})
				} else {
					that.GoodsListArr = []
					that.$refs.uWaterfall.leftList = []
					that.$refs.uWaterfall.rightList = []
					that.$refs.uWaterfall.clear();
					setTimeout(function() {
						uni.hideLoading()
					}, 500)


				}
			},
			GoGoodDetailes(row, index) {
				if(row.activity_type==2){
					//进入拼团商品页面
					uni.navigateTo({
						url: '/pages_now/pages/now/groupon/goods/details?id=' + row.product_id
					})
				}else{
					uni.navigateTo({
						url: '/pages_mall/pages/mall/goods_details/goods_details?id=' + row.product_id
					})
				}
			},
			DomeItemDetaile(row, index) {
				uni.navigateTo({
					url: '/pages_design/pages/design/demo/demo?caseId=' + row.id
				})
			}
		},
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.Search {
		padding: 16rpx 32rpx;
		border-top: 1px solid #f6f7fb;
	}

	.SearchView {
		.SearchHot {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			padding: 14rpx 32rpx 16rpx 32rpx;
		}

		.SearchTags {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 14rpx 16rpx 16rpx 16rpx;

			.SearchTagsItem {
				padding: 8rpx 24rpx;
				background: #F6F7FB;
				border-radius: 24px;
				font-size: 24rpx;
				font-weight: 400;
				color: #0A0605;
				margin: 0 16rpx 28rpx 16rpx
			}
		}
	}

	.PageNull {
		width: 500rpx;
		height: 450rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.PageNullText {
			text-align: center;
			color: #939393;
		}
	}

	.tabsList {
		z-index: 99;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
	}

	.u-waterfall {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		// flex-wrap: wrap;
	}

	.GoodsList,
	.DomeList {
		padding: 32rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;

		.DomeItem {
			box-shadow: 0px 2rpx 12rpx rgba(0, 0, 0, 0.07);
			width: 332rpx;
			margin-bottom: 20rpx;

			.DomeImage {
				width: 332rpx;
				height: 266rpx;
				overflow: hidden;
				border-radius: 8rpx 8rpx 0rpx 0rpx;
			}

			.DomeView {
				padding: 20rpx;

				.DomeMain {
					margin-bottom: 20rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #939393;
				}

				.DomeTags {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.DomeTagsItem {
						padding: 8rpx 16rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #A98F68;
						border-radius: 22rpx;
						background: #F9F6F3;
						width: max-content;
						margin-right: 16rpx;
					}
				}

				.DomeTitle {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 36rpx;
				}
			}
		}
	}
</style>
